<script setup lang="ts">

</script>

<template>
    <div class="left-Main">
        <div class="left-Main-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">门禁情况</span>
        </div>
        <div class="left-Main-bottom">
            
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Main {
    width: 28rem;
    height: 10rem;
    margin: 0 0 3rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 7rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

        &-header {
            width: 100%;
            height: 5rem;
            display: flex;
            margin-bottom: 20px;

            &-left {
                width: 40%;
                height: 90%;
                margin-left: 9%;
                margin-top: 5%;
                color: white;
                line-height: 2rem;
                text-align: center;

                &-l {
                    width: 20%;
                    height: 100%;
                    background: url('../../assets/icon/智能检测/dian.png') no-repeat center center;
                    background-size: 100%;
                    margin-left: 10px;
                    float: left;
                }

                &-r {
                    width: 90%;
                    height: 100%;
                }
            }

            &-right {
                width: 40%;
                height: 90%;
                margin-left: 4%;
                margin-top: 5%;
                color: white;
                line-height: 2rem;
                text-align: center;

                &-l {
                    width: 20%;
                    height: 100%;
                    background: url('../../assets/icon/智能检测/dian.png') no-repeat center center;
                    background-size: 100%;
                    margin-left: 10px;
                    float: left;
                }

                &-r {
                    width: 90%;
                    height: 100%;
                }
            }

        }

        &-foot {
            width: 100%;
            height: 9rem;
        }
    }
}
</style>